<template>
    <div class="zh-examine-list">
        <nav-header>
            <!-- <template slot="menuBefore">
                <li><router-link to="/life/alumni/album-list" tag="a">审批管理</router-link></li>
                <li class="gap">&gt;</li>
            </template> -->
        </nav-header>

        <div class="zh-table" v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="zh-table-open clear">
                <div class="zh-table-open clear">
                    <!-- <div class="zh-open-left fl">
                        <div class="open-width" style="width: 220px">
                        <el-input v-model="keyword" placeholder="文章标题" @keyup.enter.native="searchFunc"></el-input>
                        </div>
                        <el-button type="primary"  @click="searchFunc">搜索</el-button>
                        <el-button type="primary"  @click="reset">重置</el-button>
                    </div> -->
                    <div class="zh-open-right fr">
                        <el-button @click="newGroupView=true">新建分组</el-button>
                        <el-button @click="groupSortView=true">分组排序</el-button>
                        <el-button @click="newExamineView=true" type="primary">新建审批</el-button>
                    </div>
                </div>
            </div>

            <div class="zh-table-contents">
                <div v-for="(item,key) in list" :key="key" class="examine-type">
                    <div class="examine-type-top clear">
                        <p class="fl">{{item.name}} <span>（{{item.child.length}}）</span></p>
                        <span v-if="sortArr[key]" @click="changeStatus(1,key,'finish')" class="pointer fr">完成</span>
                        <span v-if="!sortArr[key]" @click="changeStatus(1,key,'sort')" class="pointer fr">排序</span>
                        <span v-if="item.id!==1" @click="changeStatus(2,key)" class="pointer fr edit">编辑</span>
                        <div v-if="editStatusArr[key]" class="editBar">
                            <p class="pointer" @click="showResetName(item.id,item.name)">重命名</p>
                            <p class="pointer del" @click="deleteGroup(item.id,item.name)">删除该组</p>
                            <i class="arrow"></i>
                        </div>
                    </div>
                    <ul class="examine-type-list clear" @click="changeStatus(2,key,'close')">
                        <li 
                            class="fl examine-type-single"
                            v-for="(childItem,childKey) in item.child" :key="childKey" 
                            @dragstart="dragStart($event,key,childItem)" 
                            @dragend="dragend" 
                            @dragover.prevent="dragover($event,key,childItem)" 
                            :draggable="sortArr[key] && draggable">
                            <div class="examine-type-single-top clear">
                                <!-- <img :src="pic_type()" alt="" /> -->
                                <img class="fl" :src="BASE_URL + childItem.icon_path" alt="审批类型图片" />
                                <div class="description">
                                    <p>{{childItem.name}}</p>
                                    <p><span v-if="childItem.profile">{{childItem.profile}}</span><span v-else>[ 暂无描述 ]</span></p>
                                    <p>{{childItem.update_time.slice(0,-3)}}更新</p>
                                </div>   
                            </div>
                            <div class="examine-type-single-mid clear">
                                <span :class="{fr:true, pointer:true, blockUp:sortArr[key]}" @click="showRange(childItem)">修改</span>
                                <p>
                                    <span class="fl">可见范围：</span>
                                    <span :title="childItem.role_name" class="fl">{{childItem.role_name}}</span>
                                </p>
                            </div>
                            <div class="examine-type-single-bottom">
                                <!-- <el-button type="text">编辑</el-button>
                                <el-button type="text" v-if="childItem.status==2" @click="stopUsing=true">停用</el-button>
                                <el-button type="text" v-if="childItem.status==2">移动到</el-button>
                                <el-button type="text" v-if="childItem.status==1" @click="stopUsing=false" class="startUsing">启用</el-button>
                                <el-button type="text" v-if="childItem.status==1" class="delete-button" style="margin-right:24px;">删除</el-button> -->
                                <span @click="editExamine(childItem.id)" :class="{pointer:true, blockUp:sortArr[key]}">编辑</span>
                                <span v-if="childItem.status==1" @click="switchStart(childItem.id,childItem.status)" :class="{pointer:true,blockUp:sortArr[key]}">停用</span>
                                <span v-if="childItem.status==1" @click="showMoveToView(childItem,key,childKey)" :class="{pointer:true,blockUp:sortArr[key]}">移动到</span>
                                <span v-if="childItem.status==2" @click="switchStart(childItem.id,childItem.status)" :class="{pointer:true,startUsing:true,blockUp:sortArr[key]}">启用</span>
                                <span v-if="childItem.status==2" @click="deleteItem(childItem.id,childItem.name)" :class="{pointer:true,del:true,blockUp:sortArr[key]}">删除</span>
                            </div>
                            <i class="cover" v-if="sortArr[key]"></i>

                            <!-- 所有拖拽都必须通过点击这个拖拽图标才赋予被点击审批单的拖拽能力，否则不能拖拽 -->
                            <img
                                v-if="sortArr[key]"
                                @mousedown="draggable=true"
                                @mouseup="draggable=false"
                                draggable="false"
                                :src="iconDrag(dragItem==childItem)"
                                alt="排序图标"
                                class="iconMove" />
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 修改可见范围-->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'可见范围'"
            :visible.sync="visualRangeView"
            width="400px">
            <div class="checkRange clear">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="choicePeople" @change="handleChoicePeopleChange">
                    <el-checkbox v-for="(item,key) in people" :label="item" :key="key">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visualRangeView=false">取消</el-button>
                <el-button @click="affirmChoicePeople" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 新建分组弹窗 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="closeNewGroup"
            :title="'新建分组'"
            :visible.sync="newGroupView"
            width="400px">
            <div class="new-group-name">
                分组名称：
                <el-input v-model="groupName" maxlength="8" placeholder="8个字以内"></el-input>
                <span :class="{error:repeatName}">分组名称已存在</span>
              </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeNewGroup">取消</el-button>
                <el-button @click="buildNewGroup" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 分组排列 -->
        <el-dialog
            @getListGroup='getListGroup'
            :sortList="sortList"
            :before-close="hideGroupSort"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'分组排列'"
            :visible.sync="groupSortView"
            width="400px">
            <group-sort @getListGroup='getListGroup' :sortList="sortList" ref="groupSort"></group-sort>
            <div slot="footer" class="dialog-footer">
                <el-button @click="hideGroupSort">取消</el-button>
                <el-button @click="setNewSort" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 新建审批 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'新建审批'"
            :visible.sync="newExamineView"
            width="800px">
            <div class="new-teaplate">
                <el-button @click="forDesign" class="el-icon-plus" type="primary" size="medium">自定义模版</el-button>
                <p>辅助已有模板 <img src="../../../../static/image/examine/shape.png" title="复制已有模板只会负责表单内容" alt="复制表单内容图标" /></p>
                <div class="clear standard-templates">
                    <ul>
                        <li @click="templateIdx=key" :class="{fl:true, pointer:true, active:key==templateIdx}" v-for="(item,key) in templateList" :key="key">
                            <img class="fl" :src="BASE_URL+item.icon_path" :title="item.name" :alt="item.name" />
                            <div class="fl">
                                <p>{{item.name}}</p>
                                <p><span v-if="item.profile">{{item.profile}}</span><span v-else>[ 暂无描述 ]</span></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeNewExamine">取消</el-button>
                <el-button @click="turnBuild(templateIdx)" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 删除该组 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="closeDeleteGroup"
            :title="'删除 ' + deleteApproverGroupName + '分组'"
            :visible.sync="deleteGroupView"
            width="400px">
            <div class="delete-group">
                <p>删除后，组内审批单不会被删除将会进【其他】分组</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDeleteGroup">取消</el-button>
                <el-button @click="deleteApproverGroup" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 删除单个审批单 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'删除 '+deleteApproverName+' 模板?'"
            :visible.sync="deleteExamineView"
            width="400px">
            <div class="delete-item">
                <p>删除审批单后将不能再发起该审批，已审核的审批单不能修改以及编辑</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deleteExamineView=false,deleteApproverID=deleteApproverName=''">取消</el-button>
                <el-button @click="deleteApprover" type="primary">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 重命名 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'重命名'"
            :visible.sync="rechristenView"
            width="400px">
            <div class="rechristen">
                分组名称：
                <el-input :class="{error:resetNameError,empty:checkNewGroupName}" v-model="newGroupName" maxLength="8" placeholder="请输入分组名字"></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rechristenView=false">取消</el-button>
                <el-button @click="resetName" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 移动到 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="closeMoveTo"
            :title="'将 ' + examineMove.name + ' 移动到'"
            :visible.sync="moveToView"
            width="400px">
            <ul class="moveTo">
                <li 
                    :class="{clear:true,activeMoveTo:activeMoveToIdx==key}" 
                    v-for="(item,key) in sortList" 
                    :key="key">
                    <span v-if="key==examineIdx" class="fr">当前所在组</span>
                    <p @click="activeMoveToIdx=key"><span :class="{pointer:true}">{{item.name}}</span></p>
                </li>
                <li>
                    <p v-if="!builNewGroup" @click="builNewGroup=true">
                        <span class="pointer">新建分组</span>
                    </p>
                    <div v-if="builNewGroup" class="clear">
                        <input type="text" class="fl" v-model="groupName" maxlength="8" placeholder="8个字以内"/>
                        <img
                            class="pointer fl"
                            @click="builNewGroup=false"
                            src="../../../../static/image/examine/cancel.png"
                            alt="取消图标" />
                        <img
                            class="pointer fl"
                            @click="buildNewGroupMoveTo"
                            src="../../../../static/image/examine/sure.png"
                            alt="取消图标" />
                    </div>
                </li>
            </ul>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeMoveTo">取消</el-button>
                <el-button @click="moveToGroup" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    import groupSort from './examine-group-sort.vue'
    export default {
        data(){
            let checkNewName = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('该分组名称已存在'));
                }else {
                    callback();
                }
            };
            return {
                // 加载数据时显示的信息和加载动画
                loading:{
                    status:false,
                    txt:'获取数据...',
                },
                list: [],   // 审批数据列表
                initList: [],   // 初始化的数据列表
                templateList: [],   // 模板列表
                templateIdx: null,   // 新建审批弹窗中选中的模板索引值
                sortArr: [],   // 排序
                editStatusArr: [],   // 编辑状态
                stopUsing: [],   // 停用
                draggable: false,   // 是否可拖拽
                dragGroupIdx: null,   // 当前被拖拽对象所在分组的索引值
                dragItem: null,   // 当前被拖拽对象所在数组的索引值
                dropItem: null,   // 当前被拖拽对象所hover的元素所在数组的索引值
                newGroupView: false,   // 控制新建分组弹窗的显隐
                groupName: '',   // 新建分组名称
                groupSortView: false,   // 控制分组排列弹窗的显隐
                newExamineView: false,   // 控制新建审批弹窗的显隐
                deleteGroupView: false,   // 控制删除该组弹窗的显隐
                deleteExamineView: false,   // 控制删除单个审批单弹窗的显隐
                rechristenView: false,   // 控制重命名弹窗的显隐
                newGroupName: '',   // 存放重命名的分组名字或新名字
                initGroupName: '',   // 存放修改前的名字
                resetNameError: false,   // 存放检测到新建名字已存在时值为true
                moveToView: false,   // 控制移动单个审批单的弹窗显隐
                examineMove: '',   // 将要移动的审批单信息
                examineIdx: '',   // 将要移动的审批单所在分组索引值
                builNewGroup: false,   // 将要移动的审批单弹窗中是否新建分组
                deleteApproverID: '',   // 存放要被删除的审批模板ID值
                deleteApproverName: '',   // 存放要被删除的审批模板名字
                deleteApproverGroupID: '',   // 存放要被删除的审批分组ID值
                deleteApproverGroupName: '',   // 存放要被删除的审批分组名字
                resetNameID: '',   // 存放重命名的分组ID
                visualRangeView: false,   // 控制修改可见范围弹窗的显隐
                modifiedID: null,   // 修改的模板id
                checkAll:  false,    // 值为true时代表全选
                people: [],   // 存放角色列表 
                choicePeople:  [],    // 已选可以发起审批的人的数组
                isIndeterminate:  false,   // 负责全选的样式控制
                repeatName: false,   // 新建分组时，若存在重复名字时值为true
                sortList: [],   // 分组排序的数据列表
                activeMoveToIdx: null,   // 移动到组件中被选中的目标分组索引值
            }
        },
        created(){
            // 获取审批模板
            this.getListGroup();

            // 获取角色列表
            this.getRoleList();
        },
        computed:{
            iconDrag(){
                return function(status){
                    if(status){
                        return '../../../../static/image/examine/drag2.png';
                    }else{
                        return '../../../../static/image/examine/drag.png';
                    }
                }
            },
            // 检测新名字是否重名
            checkNewGroupName(){
                // 去除前后空格
                this.newGroupName = this.newGroupName.trim();
                if(this.newGroupName){
                    return false
                }else{
                    return true
                }
            }
        },  
        components:{
            // 分组排列弹窗
            groupSort
        },
        methods:{
            /**
             * [改变当前选择的状态]
             * @param  {num} 1,2 [类型：1、排序，2、编辑]
             * @param  {key]} 0,1,2 [当前选择在数组中的索引值]
             */
            changeStatus(num,key,item){
                // 初始化排序
                let initSort = ()=>{
                    this.list[this.dragGroupIdx].child = this.initList[this.dragGroupIdx].child.map(item=>item);
                }

                if(num==1){
                    let arr = this.sortArr.map(()=>false);
                    arr[key] = !this.sortArr[key];

                    this.sortArr = arr.map(item=>item);

                    if(item=='sort'){
                        if(this.dragGroupIdx==null){
                            this.dragGroupIdx = key;
                            return
                        }

                        initSort()

                        this.dragGroupIdx = key;
                    }else if(item=='finish'){

                        let sortArr = this.list[this.dragGroupIdx].child.map((item,key)=>{
                            return {
                                id:item.id,   // 分组id
                                sort: key+1
                            }
                        })

                        let listParam = {
                            reorder: sortArr   // 二维数组（所有分组id和对应的位置）（参数事例：$reorder['id']；$reorder['sort']）
                        }

                        let success = (res=>{
                            if(res.status=='success'){
                                this.$message.success('操作成功');
                                // 更新审批列表信息
                                this.getListGroup();

                                this.dragGroupIdx = null;

                            }else{
                                this.$message.error('操作失败');
                            }
                        })

                        let fail = ( data => {
                            this.$message.error(data.msg);
                        })

                        // 发送审批分组排序申请
                        this.$ajax.put('/api/examine/reorderExamineFormwork',listParam,{func:{success:success,fail:fail}})

                    }


                    // 收起编辑弹窗
                    this.editStatusArr = this.list.map(()=>false);

                }else if(num==2){
                    let arr = this.editStatusArr.map(()=>false);

                    if(item=='close'){
                        this.editStatusArr = arr.map(item=>false);
                        return 
                    }

                    arr[key] = !this.editStatusArr[key];

                    this.editStatusArr = arr.map(item=>item);

                    // 收起排序功能
                    this.sortArr = this.list.map(()=>false);

                }
                // else if(num==3){   // you 
                //     let arr = this.stopUsing.map(()=>false);
                //     arr[key] = !this.stopUsing[key];

                //     this.stopUsing = arr.map(item=>item);

                // }

            },
            // 获取角色列表
            getRoleList(){
                let listParam = {
                    status:1,   // 状态（1：正常；0：已删除）
                }

                let success = (res=>{
                    let data = res.data;
                    this.people = data;
                })

                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/role/examineRoleGet',{params: listParam,func:{success:success,fail:fail}})
            },
            // 获取审批列表（返回有分组格式列表）
            getListGroup(){
                let listParam = {
                    // type:1,     // 1：轮播文章；2：普通文章
                    // data_type:0,     // 0：没有分页 ； 1：有分页
                    // order:'time'     // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                }

                // 显示加载动画
                this.loading.status = true;
                let success = (res=>{
                    // 隐藏加载动画
                    this.loading.status = false;

                    let data = res.data;

                    // 此操作用于避免把其他分组中移动审批模板时且新建分组时产生的错误
                    if(this.moveToView && this.examineIdx==this.list.length-1){
                        this.examineIdx++;
                        this.activeMoveToIdx++;
                    }

                    this.list = data.map(item=>item);

                    this.initList = deep_clone(data);

                    this.sortList = data.map(item=>({id:item.id,name:item.name}));

                    this.templateList = [];

                    data.forEach(item=>{
                        this.templateList = [...this.templateList,...item.child];
                    });

                    this.getListNoGroup();

                })
                let fail = ( data => {
                    // 隐藏加载动画
                    this.loading.status = false;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/examine/examineFormwork',{params: listParam,func:{success:success,fail:fail}})
            },  
            // 获取审批列表(返回没有分组格式)
            getListNoGroup(){
                let success = (res=>{
                    let data = res.data;

                    this.templateList = data;

                })
                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/examine/examineFormwork',{params: {data_type: 1},func:{success:success,fail:fail}})
            },  
            // 跳转到编辑页面
            editExamine(id){
                this.$router.push({name: 'form-design',query: {id: id, model: 'no'}})
            },
            // 跳转到审批设计页面
            forDesign(){
                this.$router.push('form-design')
            },
            // 携带模板跳转到审批设计页面
            turnBuild(idx){
                if(idx===null){
                    this.$message.warning('请选择已有模板')
                    return
                }

                let id = this.templateList[idx].id;
                this.newExamineView = false;
                this.$router.push({name: 'form-design',query: {id: id,model: 'yes'}})
            },
            // 赋予可拖拽的方法
            dragStart(e,key,childItem){
                this.dragGroupIdx = key;
                this.dragItem = childItem;
                e.dataTransfer.setData('moveIdx',childItem)
            },
            dragover(e,key,childItem){
                // 如果不是同一个分组则return
                if(this.dragGroupIdx != key){
                    return 
                }

                // 若是当前放置对象没有改变则return
                if(this.dropItem == childItem){
                    return
                }

                this.dropItem = childItem;

                // 若是当前放置对象和被拖拽对象是同一个则return
                if(this.dragItem == childItem){
                    return
                }

                
                this.setSort(this.dragItem,this.dropItem)
            },
            // 排序方法
            setSort(dragItem,dropItem){
                let dragIdx,dropIdx;

                // 找出被拖拽的元素和被hover元素的索引值
                this.list[this.dragGroupIdx].child.forEach((item,idx)=>{
                    if(dragItem.id==item.id){
                        dragIdx = idx;
                    }else if(dropItem.id==item.id){
                        dropIdx = idx;
                    }
                })

                dragItem = this.list[this.dragGroupIdx].child.splice(dragIdx,1)[0];

                this.list[this.dragGroupIdx].child.splice(dropIdx,0,dragItem);
            },
            // 放置事件
            dragend(){
                // 拖拽结束时重置拖拽数据
                this.draggable = false;
                // this.dragGroupIdx = null;
                this.dragItem = null;
                this.dropItem = null;

            },
            // 隐藏分组排列
            hideGroupSort(){
                this.groupSortView = false;
                this.sortList = this.initList.map(item=>({id:item.id,name:item.name}));
            },
            // 设置新的分组排列顺序
            setNewSort(){
                this.groupSortView = false;
                this.$refs.groupSort.setNewSort();
            },
            // 显示删除审批模板弹窗
            deleteItem(deleteID,deleteName){
                this.deleteApproverID = deleteID;
                this.deleteApproverName = deleteName;
                this.deleteExamineView = true;
            },
            // 发送删除审批模板请求
            deleteApprover(){
                let listParam = {
                    id: this.deleteApproverID   // 审批模板id；可int；可以array；可一个，可多个
                }

                let success = (res=>{
                    if(res.data==true){
                        // 更新审批列表信息
                        this.getListGroup()

                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('操作失败');
                    }

                    // 隐藏弹窗并清空删除信息
                    this.deleteApproverID = '';
                    this.deleteApproverName = '';
                    this.deleteExamineView = false;
                })
                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.delete('/api/examine/examineFormwork',{params: listParam,func:{success:success,fail:fail}})

            },
            deleteGroup(deleteID,deleteName){
                this.deleteApproverGroupID = deleteID;
                this.deleteApproverGroupName = deleteName;
                this.deleteGroupView = true;
                this.editStatusArr = this.list.map(()=>false);
            },
            // 发送删除分组请求
            deleteApproverGroup(){
                let listParam = {
                    id: this.deleteApproverGroupID   // 审批模板id；可int；可以array；可一个，可多个
                }

                let success = (res=>{
                    if(res.data==true){
                        // 更新审批列表信息
                        this.getListGroup()

                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('操作失败');
                    }

                    // 隐藏弹窗并清空删除信息
                    this.deleteApproverGroupID = '';
                    this.deleteApproverGroupName = '';
                    this.deleteGroupView = false;
                })
                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.delete('/api/examine/examineCate',{params: listParam,func:{success:success,fail:fail}})

                this.deleteGroupView = true;
            },
            // 显示分组重命名弹窗ID
            showResetName(resetID,resetName){
                this.resetNameID = resetID;
                this.newGroupName = this.initGroupName = resetName;
                this.rechristenView = true;
            },
            // 发送分子重名命名弹窗
            resetName(){
                if(this.newGroupName == this.initGroupName){
                    this.rechristenView = false;
                    this.editStatusArr = this.list.map(()=>false);
                    return
                }

                let listParam = {
                    id: this.resetNameID,   // 审批模板id；可int；可以array；可一个，可多个
                    name: this.newGroupName  // 审批分组名
                }

                let success = (res=>{
                    if(res.data==true){
                        // 更新审批列表信息
                        this.getListGroup()

                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('操作失败');
                    } 

                    // 隐藏弹窗并清空删除信息
                    this.rechristenView = false;
                    this.editStatusArr = this.list.map(()=>false);
                })
                let fail = ( data => {})

                this.$ajax.put('/api/examine/examineCate',listParam,{func:{success:success,fail:fail}})

            },
            // --------------------------------------- 以下是可见范围弹窗的操作方法 ------------------------------------
            // 显示修改可见范围弹窗
            showRange(item){
                this.modifiedID = item.id;

                if(item.role_id==null){
                    this.choicePeople = [];
                    this.checkAll = false;
                    this.isIndeterminate = false;
                    this.visualRangeView = true;
                    return 
                }

                let role_arr = item.role_id.split(',');

                this.choicePeople = this.people.filter(item=>{
                    if(role_arr.includes(item.id+'')){
                        return item;
                    }
                });

                if(this.choicePeople.length == this.people.length){
                    this.checkAll = true;
                    this.isIndeterminate = false;
                }else{
                    this.checkAll = false;
                    this.isIndeterminate = true;
                }

                this.visualRangeView = true;
            },
            // 可见范围全选
            handleCheckAllChange(val) {
                this.choicePeople = val ? this.people.map(item=>item) : [];
                this.isIndeterminate = false;
            },
            // 可见范围选择单独一个
            handleChoicePeopleChange(value) {
                let choiceCount = value.length;
                this.checkAll = choiceCount === this.people.length;
                this.isIndeterminate = choiceCount > 0 && choiceCount < this.people.length;
            },
            // 可见范围确认本次选择的可发起审批的人
            affirmChoicePeople(){
                let role_arr = this.choicePeople.map(item=>item.id);

                if(role_arr.length<=0){
                    this.$message.error('可见范围不能为空');
                    return 
                }

                let listParam = {
                    id: this.modifiedID,   // 修改的审批模板id
                    role: role_arr  // 角色id（一维数组）
                }

                let success = (res=>{
                    if(res.status=='success'){
                        // 更新审批列表信息
                        this.getListGroup()

                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('操作失败');
                    }

                    this.visualRangeView = false;
                   
                })
                let fail = ( data => {
                    this.$message.error('操作失败');
                })

                this.$ajax.put('/api/examine/examineFormworkRole',listParam,{func:{success:success,fail:fail}})
                
            },
            // 发起启用/停用请求
            switchStart(id,status){
                let listParam = {
                    id: id,   // 审批模板id
                    status: status==1? 2 : 1   // 1：启用；2：停用
                }

                let success = (res=>{
                    if(res.status=='success'){
                        // 更新审批列表信息
                        this.getListGroup()

                    }else{
                        this.$message.error('操作失败');
                    }
                })

                let fail = ( data => {})

                this.$ajax.put('/api/examine/updateExamineFormworkStatus',listParam,{func:{success:success,fail:fail}})
            },
            // 发送新建分组请求
            buildNewGroup(){
                let name = this.groupName.trim();

                if(!name){
                    // this.$message.closeAll();
                    this.$message.warning('名字不能为空或纯空格');
                    return
                }

                let listParam = {
                    name: name,   // 分组名
                    create_id: JSON.parse(sessionStorage.getItem('user_info_str')).id   // 创建人id
                }

                let success = (res=>{
                    if(res.status=='success'){
                        this.$message.success('操作成功');

                        // 重置新建分组名字
                        this.groupName = '';

                        // 更新审批列表信息
                        this.getListGroup()

                        this.newGroupView = false;

                    }else{
                        this.$message.error('操作失败');
                    }
                })

                let fail = ( data => {
                    this.$message.error(data.msg);
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.post('/api/examine/examineCate',listParam,{func:{success:success,fail:fail}})
            },
            // 移动分组弹窗中的新建分组请求
            buildNewGroupMoveTo(){
                let name = this.groupName.trim();

                let listParam = {
                    name: name,   // 分组名
                    create_id: JSON.parse(sessionStorage.getItem('user_info_str')).id   // 创建人id
                }

                let success = (res=>{
                    if(res.status=='success'){
                        this.$message.success('操作成功');

                        // 更新审批列表信息
                        this.getListGroup()
                        // 清空已新建的分组名字
                        this.groupName = '';
                        // 收起新建分组输入框
                        this.builNewGroup = false;

                    }else{
                        this.$message.error('操作失败');
                    }
                })

                let fail = ( data => {
                    this.$message.error(data.msg);
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.post('/api/examine/examineCate',listParam,{func:{success:success,fail:fail}})
            },
            // 显示 移动到其他分组 的弹窗方法
            showMoveToView(item,key,childKey){
                this.activeMoveToIdx = key;   // 重置目标分组

                this.examineIdx = key;   // 将要移动的审批模板所在分组的索引值

                this.examineMove = item;   // 将要移动的审批模板信息

                this.moveToView = true;   // 显示弹窗
            },
            // 发送移动到其他分组的分组的请求
            moveToGroup(){
                if(this.examineIdx==this.activeMoveToIdx){
                    // 隐藏弹窗
                    this.moveToView = false;

                    return
                }

                let listParam = {
                    id: this.examineMove.id,   // 审批模板id
                    cate_id: this.list[this.activeMoveToIdx].id   // 分组id
                }

                let success = (res=>{
                    if(res.status=='success'){
                        this.$message.success('操作成功');

                        // 更新审批列表信息
                        this.getListGroup();

                        // 隐藏弹窗
                        this.moveToView = false;

                    }else{
                        this.$message.error('操作失败');
                    }
                })

                let fail = ( data => {
                    this.$message.error(data.msg);
                })

                // 发送审批分组排序申请
                this.$ajax.put('/api/examine/updateExamineFormworkCate',listParam,{func:{success:success,fail:fail}})
            },
            // 关闭新建分组弹窗
            closeNewGroup(){
                this.newGroupView = false;
                this.groupName = '';
            },
            // 关闭新建审批弹窗
            closeNewExamine(){
                this.newExamineView = false;
                this.templateIdx = null;
            },
            // 关闭删除该组弹窗
            closeDeleteGroup(){
                this.deleteGroupView = false
                this.deleteApproverGroupID=deleteApproverGroupName = '';
            },
            // 关闭移动到弹窗
            closeMoveTo(){
                this.moveToView = false;
                this.groupName = '';
                this.builNewGroup = false;
            }
        }
    }
</script>

<style lang="scss">
    .zh-examine-list{
        .zh-table{
            .zh-table-contents{
                
                // 禁止鼠标选中文字
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Chrome/Safari/Opera */
                -khtml-user-select: none; /* Konqueror */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                not supported by any browser */
                .examine-type{
                    margin-top:20px;
                    border: 1px solid #EFEFEF;
                    border-radius: 3px;
                    &:first-child{
                        margin:0;
                    }
                    .examine-type-top{
                        position:relative;
                        padding:0  40px;
                        height:30px;
                        line-height:30px;
                        font-size:14px;
                        letter-spacing: 0;
                        color: #333333;
                        background: #F6F6F6;
                        >p{
                            margin:0;
                            span{
                                color: #3F3F3F;
                            }
                        }
                        >span{
                            font-size: 14px;
                            color: #348EFC;
                            &.edit{
                                margin-right:33px;
                            }
                        }
                        .editBar{
                            position:absolute;
                            z-index:1;
                            top:45px;
                            right:67px;
                            width:98px;
                            height:76px;
                            background: #FFFFFF;
                            box-shadow: 0 0 4px 0 rgba(172,172,172,0.50);
                            p{
                                margin:0;
                                margin-top:8px;
                                height:30px;
                                line-height:30px;
                                font-size: 14px;
                                color: #000000;
                                letter-spacing: 0;
                                text-align:center;
                                &.del{
                                    margin-top:0px;
                                    margin-bottom:8px;
                                    line-height:30px;
                                    color: #D55568;
                                    &:hover{
                                        color:#D55568;
                                    }
                                }
                                &:hover{
                                    color: #348EFC;
                                    background: #E8F2FF;
                                }
                            }
                            .arrow{
                                position: absolute;
                                top:-21px;
                                left:50%;
                                transform:translateX(-50%);   
                                width: 0px;   
                                height: 0px;   
                                border:10px solid transparent;
                                border-bottom:10px solid rgba(172,172,172,0.50);
                                &::after{
                                    position: absolute;
                                    content:'';
                                    top:-9px;
                                    left:50%;
                                    transform:translateX(-50%);   
                                    width: 0px;   
                                    height: 0px;   
                                    border:10px solid transparent;
                                    border-bottom:10px solid #fff;
                                }
                            }

                        }
                    }
                    .examine-type-list{
                        padding:30px 20px 0 40px;
                        background: #FFFFFF;
                        .examine-type-single{
                            position:relative;
                            box-sizing:border-box;
                            margin-right:20px;
                            margin-bottom:30px;
                            width:260px;
                            height:156px;
                            overflow:hidden;
                            border: 1px solid #EFEFEF;
                            border-radius: 4px;
                            .examine-type-single-top{
                                padding:15px;
                                padding-bottom:0;
                                img{
                                    margin-right:20px;
                                    width:50px;
                                    height:50px;
                                    object-fit:cover;
                                    overflow:hidden;
                                }
                                .description{
                                    p{
                                        margin:0;
                                        height:16px;
                                        line-height:16px;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                        &:first-child{
                                            height:18px;
                                            line-height:18px;
                                            font-size: 14px;
                                            color: #333333;
                                            letter-spacing: 0;
                                        }
                                        &:nth-child(2){
                                            font-size: 12px;
                                            color: #666666;
                                            letter-spacing: 0;
                                        }
                                        &:last-child{
                                            font-size: 12px;
                                            color: #999999;
                                            letter-spacing: 0;
                                        }
                                    }
                                }
                            }
                            .examine-type-single-mid{
                                padding:0 15px;
                                overflow:hidden;
                                margin-top:26px;
                                >p{
                                    margin:0;
                                    height:16px;
                                    line-height:16px;
                                    overflow:hidden;
                                    font-size: 12px;
                                    color: #666666;
                                    letter-spacing: 0;
                                    span:last-child{
                                        width:130px;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                    }
                                }
                                >span{
                                    font-size: 12px;
                                    color: #348EFC;
                                    letter-spacing: 0;
                                    &.blockUp{
                                        color:#999;
                                    }
                                }
                            }
                            .examine-type-single-bottom{
                                margin-top:21px;
                                height:26px;
                                line-height:26px;
                                text-align:right;
                                font-size: 12px;
                                color: #348EFC;
                                letter-spacing: 0;
                                background: #EFEFEF;
                                span{
                                    margin: 0 12px;
                                    &.startUsing{
                                        color: #666666;
                                    }
                                    &.del{
                                        margin-right:24px;
                                        color: #D55568;
                                    }
                                    &.remove{
                                        color: #999999;
                                    }
                                    &.blockUp{
                                        color:#999;
                                    }
                                }
                                .el-button{
                                    margin: 0 12px;
                                    padding:0;
                                    line-height:26px;
                                    color:#409EFF;
                                    span{
                                        margin:0;
                                        padding:0;
                                    }
                                    // &.delete-button{
                                    //     color:#f56c6c;
                                    // }
                                    &.start-button{

                                    } 
                                }
                            }
                            .cover{
                                position:absolute;
                                top:0;
                                bottom:0;
                                left:0;
                                right:0;
                            }
                            .iconMove{
                                position:absolute;
                                top:11px;
                                right:16px;
                                width:14px;
                                height:12px;
                                cursor:move;
                            }
                        }
                    }
                }
            }
        }
        
        .el-dialog__wrapper{
            .el-dialog{
                .el-dialog__body{

                    // 新增分组
                    .new-group-name{
                        position:relative;
                        padding:50px 0 60px;
                        text-align:center;
                        .el-input{
                            display:inline-block;
                            width:240px;
                        }
                        >span{
                            position:absolute;
                            bottom:38px;
                            left:88px;
                            color:red;
                            display:none;
                            &:error{
                                display:block;
                            }
                        }
                    }

                    // 新建审批
                    .new-teaplate{
                        // background: pink;
                        .el-button{
                           >span{
                            margin-left:8px;
                           } 
                        }
                        .el-input{

                        }
                        >p{
                            margin:0;
                            margin-top:40px;
                            height:20px;
                            line-height:20px;
                            font-size: 14px;
                            color: #333333;
                            opacity: 0.66;
                            letter-spacing: 0;
                            vertical-align:middle;
                            img{
                                width:20px;
                                height:20px;
                                margin-left:11.5px;
                                vertical-align:middle;
                            }
                        }
                        .standard-templates{
                            margin-top:26px;
                            margin-bottom:30px;
                            padding:14px 0;
                            width:720px;
                            background: #F4F4F4;
                            ul{
                                height:390px;
                                overflow-x:hidden;
                                li{
                                    margin-top:10px;
                                    margin-left:10px;
                                    padding:17px 15px;
                                    box-sizing:border-box;
                                    width:220px;
                                    height:90px; 
                                    background: #fff;
                                    &.active{
                                        padding:15px 13px;
                                        border:2px solid #348EFC;;
                                    }
                                    >img{
                                        margin-right:20px;
                                        width:50px;
                                        height:50px;
                                    }
                                    >div{
                                        p{
                                            margin:0;
                                            width:120px;
                                            overflow:hidden;
                                            text-overflow:ellipsis;
                                            line-height:18px;
                                            font-size: 14px;
                                            color: #333334;
                                            letter-spacing: 0;
                                            &:first-child{
                                                white-space:nowrap;
                                            }
                                            &:last-child{
                                                margin-top:6px;
                                                line-height:16px;
                                                font-size: 12px;
                                                color: #666666;
                                                display: -webkit-box;
                                                -webkit-box-orient: vertical;
                                                -webkit-line-clamp: 2;
                                            }
                                        }
                                    }
                                    &:nth-child(-n+3){
                                        margin-top:0;
                                    }
                                }
                            }
                        }
                    }

                    // 删除该组
                    .delete-group{
                        margin:40px auto 46px;
                        width:266px;
                        font-size: 14px;
                        text-align:left;
                        line-height:20px;
                        color: #000000;
                        letter-spacing: 0;
                    }

                    // 删除单个审批单
                    .delete-item{
                        margin:40px auto 46px;
                        width:266px;
                        font-size: 14px;
                        text-align:left;
                        line-height:20px;
                        color: #000000;
                        letter-spacing: 0;
                    }

                    // 重命名
                    .rechristen{
                        padding:50px 0 60px;
                        text-align:center;
                        .el-input{
                            display:inline-block;
                            width:240px;

                            &.error{
                                input{
                                    border:1px solid #EC4D4D;
                                }
                                &::after{
                                    content:'该分组名称已存在';
                                    position:absolute;
                                    top:40px;
                                    left:0;
                                    font-size: 12px;
                                    color: #CE2E2E;
                                    letter-spacing: 0.11px;
                                }
                            }
                            &.empty{
                                input{
                                    border:1px solid #EC4D4D;
                                }
                                &::after{
                                    content:'名字不能为空';
                                    position:absolute;
                                    top:40px;
                                    left:0;
                                    font-size: 12px;
                                    color: #CE2E2E;
                                    letter-spacing: 0.11px;
                                }
                            }
                        }
                    }

                    // 移动到
                    .moveTo{
                        margin:12px 0 20px;
                        height:173px;
                        overflow-x:hidden;
                        border-top:1px solid #DDDDDD;
                        border-bottom:1px solid #DDDDDD;
                        li{
                            height:34px;
                            line-height:34px;
                            font-size: 14px;
                            color: #000000;
                            letter-spacing: 0.13px;
                            border:1px solid #DDDDDD;
                            border-bottom:0 none;
                            &:first-child{
                                border-top:0 none;
                            }
                            &:last-child{
                                color: #348EFC;
                            }
                            >span{
                                padding: 0 14px;
                                width:62px;
                                height:100%;
                                font-size: 12px;
                                color: #666666;
                                letter-spacing: 0.11px;
                                text-align:center;
                            }
                            >p{
                                margin:0;
                                padding-left:16px;
                                height:100%;
                                text-align:left;
                                overflow:hidden;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                            }
                            &.activeMoveTo{
                                background:#eee;
                            }
                            >div{
                                margin-top:2px;
                                >input{
                                    margin-left:13px;
                                    padding:0;
                                    padding-left:8px;
                                    width:220px;
                                    height:28px;
                                    line-height:28px;
                                    vertical-align:middle;
                                    background: #FFFFFF;
                                    border: 1px solid #DDDDDD;
                                    &::-webkit-input-placeholder{
                                        font-size: 12px;
                                        color: #999999;
                                        letter-spacing: 0.11px;
                                    }
                                }
                                >img{
                                    margin-top:5px;
                                    margin-left:10px;
                                    width:20px;
                                    height:20px;
                                    vertical-align:middle;
                                }
                            }
                        }
                    }
                }
            }
        }

        .pointer{
            cursor:pointer;
        }

        p{
            margin:0;
        }
        
    }
</style>